---
title: Sheet
description: The Sheet is an extension of the Dialog component that is positioned on the sides of the viewport instead of centered within the viewport.
docType: Demo
docGroup: Components
group: Feedbazck
alias: [Dialog, Modal]
components: [Sheet]
---

# Sheet

The `Sheet` is an extension of the [Dialog](/components/dialog) component that
is positioned on the sides of the viewport instead of centered within the
viewport.

## Simple Example

The `Sheet` defaults to rendering to the left of the viewport and requires an
`aria-label` or `aria-labelledby` for accessibility just like the `Dialog`.

```demo source="./SimpleExample.tsx"

```

### Sheet Positions

The `Sheet` can be rendered at the `"left"` (default), `"right"`, `"top"`, or
`"bottom"` by using the `position` prop.

```demo source="./SheetPositionsExample.tsx"

```

### Horizontal Size

Horizontal sheets support the following sizes:

- `"none"` - the size is based on content, but is still limited to the viewport
  width so that the horizontal scrolling will not occur within the page.
- `"touch"` - the `width` is set to be the entire viewport width minus a
  touchable area and is normally recommended for mobile devices
- `"static"` - the `width` is set to a static `16rem` and generally used for
  landscape tablets and desktops.
- `"media"` (default) - switches from `"touch"` to `"static"` once the tablet
  media query matches

```demo source="./HorizontalSizeExample.tsx"

```

### Vertical Size

Vertical sheets support the following sizes:

- `"none"` - the size is based on content and is limited to the viewport
  height
- `"touch"` - the size is based on content and is limited to the viewport
  height minus a small touchable area
- `"recommended"` (default) - the material design recommended sizing that
  forces a `max-height` of `50vh` and `min-height` of `3.5rem`

> !Warn! The `"touch"` size does not automatically span the entire viewport
> like the horizontal version. Vertical sheets are normally used for
> [rendering menus in a sheet](/components/menu#rendering-in-a-sheet) on mobile
> devices to increase accessibility.

```demo source="./VerticalSizeExample.tsx"

```
